<template>
  <div style="width: 100%;height: 100%;">
    <div class="header">
      <a @click="backMethod">
        <i class="el-icon-arrow-left" style="font-size: 20px; color:white;margin-right: 20px;">返回</i>
      </a>
      <h3 style="color: white;">查询商品</h3>
    </div>
    <div style="display: flex;width: 100%;height: 100%; box-sizing: border-box;padding: 100px 35px 0;
    justify-content: space-between;flex-flow: row wrap;align-content: flex-start;">
      <div v-for="goods in goodsList" :key="goods.goodsId" @click="showGoodsDetails(goods)"
      style="box-shadow: 0 0 3px 3px #e6e6e6; width: 45%;box-sizing: border-box;padding: 10px;
      display: flex;flex-direction: column;margin-bottom: 15px;height: 215px;">
        <div>
          <img :src="goods.goodsImg" style="width: 100%;height: 100%;">
        </div>
        <div style="box-sizing: border-box;padding: 5px 10px;text-align: left;">
          <h4 style="height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;">
          {{goods.goodsName}}</h4>
          <div style="display: flex;justify-content: space-between;">
            <span style="background-color: red;color: #fff;box-sizing: border-box;padding: 3px;font-size: 12px;">火热</span>
            <span>￥<span style="color: red;font-size: 20px;">{{goods.price}}.00</span></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    data() {
      return{
        goodsList:[]
      }
    },
    mounted() {
      this.defaultMethod()
    },
    methods:{
      //返回方法
      backMethod(){
        let lastPage = sessionStorage.getItem("lastPage");
        if(lastPage!=null && lastPage!="/search"){
          this.$router.push({
            path: lastPage
          });
        }else{
          this.$router.push({
            path: "/home/index"
          });
        }
      },
      defaultMethod(){
        this.goodsList = JSON.parse(sessionStorage.getItem("goodsList"))
        console.log(this.goodsList)
      },
      //准备跳转
      showGoodsDetails(item){
        sessionStorage.setItem("lastPage",'/search')
        this.$router.push({
          path:"/goodsItemDetails",
          name:"GoodsDetails",
          params:{
            goodsItemDetails:item
          }
        })
      },
    }
  }
</script>

<style scoped>
  .header{
    display: flex;
    padding-left: 30px;
    height: 80px !important;
    line-height: 80px;
    background-color: #732707;
    position: fixed;
    top: 0;
    width: 100%;
  }
</style>
